<template>
  <div>
    <bread-crumb name1="数据统计" name2="数据报表"></bread-crumb>
    <el-card>
      <div id="main" style="width: 600px; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
import BreadCrumb from "@/components/common/breadcrumb/BreadCrumb";
// 引入Echarts
import * as echarts from "echarts";
import { data_num_req } from "@/api/order.js";
import _ from "lodash";
export default {
  data() {
    return {
      dataNumReq: {},
    };
  },
  components: {
    BreadCrumb,
  },
  created() {
    this.getData();
  },
  async mounted() {
    // 初始化echarts实例
    const myChart = echarts.init(document.getElementById("main"));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "用户来源",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },

      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "10%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
    };
    const result = await data_num_req();
    console.log(result);
    if (result.meta.status == 200) {
      console.log(1111);
      this.dataNumReq = result.data;
      console.log(this.dataNumReq);
    }
    // 将请求回来的data中的配置同默认option进行合并 形成最新的配置对象
    // this.dataNumReq option
    console.log(this.dataNumReq);
    const newOptions = _.merge(this.dataNumReq, option);
    console.log(newOptions);

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(newOptions);
  },
  methods: {
    async getData() {},
  },
};
</script>

<style lang="scss" scoped>
</style>